<template>
  <div class="User">
    <el-container>
      <el-header style="width:100%;margin-top: 30px;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="卡号">
            <el-input v-model="formInline.cardNum" placeholder="卡号" style="height:50px;width: 100px"></el-input>
          </el-form-item>
          <el-form-item label="区域名" >
            <el-select v-model="formInline.areaNames"  placeholder="区域名" style="height:50px;width: 100px">
              <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用水性质">
            <el-select v-model="formInline.type" placeholder="状态" style="height:50px;width: 100px">
              <el-option label="居民用水" value="居民用水"></el-option>
              <el-option label="商业用水" value="商业用水"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户状态">
            <el-select v-model="formInline.meterState" placeholder="状态" style="height:50px;width: 100px">
              <el-option label="正常" value="正常"></el-option>
              <el-option label="停水" value="停水"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" round @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item style="margin-left: 450px">
            <el-button type="primary" round icon="el-icon-circle-plus" @click="onAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <div style="height: 1px"></div>
      <el-main style="width:70%;margin: 0 auto;margin-top:5px;height:100%;margin-left:250px">
        <el-table
            :data="tableData"
            border
            style="width: 100%">
          <el-table-column
              fixed
              prop="username"
              label="用户姓名"
              width="80">
          </el-table-column>
          <el-table-column
              prop="idnum"
              label="身份证号"
              width="200">
          </el-table-column>
          <el-table-column
              prop="userAddress"
              label="用户地址"
              width="80">
          </el-table-column>
          <el-table-column
              prop="userTel"
              label="联系方式"
              width="200">
          </el-table-column>
          <el-table-column
              prop="meterId"
              label="水表号"
              width="80">
          </el-table-column>
          <el-table-column
              prop="cardNum"
              label="卡号"
              width="200">
          </el-table-column>
          <el-table-column
              prop="areaName"
              label="区域名"
              width="150">
          </el-table-column>
          <el-table-column
              prop="meterDate"
              label="开通时间"
              width="100">
          </el-table-column>
          <el-table-column
              prop="meterState"
              label="状态"
              width="78">
          </el-table-column>
          <el-table-column
              prop="type"
              label="用水性质"
              width="78">
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <el-pagination @current-change='handleJump' :current-page="currPage"
                       layout="prev, pager,jumper,total,next" :total="total" :page-size="size">
        </el-pagination>
      </el-main>
    </el-container>
    <!-- 弹出框 -->
    <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" :disabled="true"> </el-input>
        </el-form-item>
        <el-form-item label="身份证号" :label-width="formLabelWidth" >
          <el-input v-model="form.idnum" autocomplete="off" :disabled="true" ></el-input>
        </el-form-item>
        <el-form-item label="水表号" :label-width="formLabelWidth" >
          <el-input v-model="form.meterId" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="卡号" :label-width="formLabelWidth" >
          <el-input v-model="form.cardNum" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="form.userTel" autocomplete="off" ></el-input>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="form.meterState" placeholder="状态">
            <el-option label="正常" value="正常"></el-option>
            <el-option label="停水" value="停水"></el-option>
          </el-select>
        </el-form-item>

        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUserNews(form);dialogFormVisible = false" >确 定</el-button>

      </el-form>
    </el-dialog>
    <!-- 弹出框 -->
    <el-dialog title="录入用户信息" :visible.sync="addVidible">
      <el-form :model="addForm" :rules="rules">
        <el-form-item label="用水性质" :label-width="formLabelWidth" prop="type" required>
          <el-select v-model="addForm.type" >
            <el-option label="居民用水" value="居民用水"></el-option>
            <el-option label="商业用水" value="商业用水"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区域名" :label-width="formLabelWidth" prop="areaName" required>
          <el-select v-model="addForm.areaName"  autocomplete="off" >
            <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth" required prop="username">
          <el-input v-model="addForm.username" autocomplete="off" required> </el-input>
        </el-form-item>
        <el-form-item label="身份证号" :label-width="formLabelWidth" prop="idnum" required>
          <el-input v-model="addForm.idnum" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="家庭住址" :label-width="formLabelWidth" prop="userAddress" required>
          <el-input v-model="addForm.userAddress" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth" prop="userTel" required>
          <el-input v-model="addForm.userTel" autocomplete="off" ></el-input>
        </el-form-item>

        <el-form-item label="卡号" :label-width="formLabelWidth" prop="cardNum" required>
          <el-input v-model="addForm.cardNum" autocomplete="off" ></el-input>
        </el-form-item>


        <el-button @click="addVidible = false">取 消</el-button>
        <el-button type="primary" @click="addUserNews(addForm);addVidible = false" >确 定</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
export default {
  name: "User",
  methods: {
    handleClick:function(form) {
      console.log(form);
      this.form=form;
      this.dialogFormVisible=true;
    },
    onAdd:function (addForm){
      this.form=addForm;
      this.addVidible=true;
    },
    //下拉
    getDep:function(){
      var _this=this;
      axios.get("http://localhost:8081/showDown")
          .then(function(res){
            console.log(res)
            var _data=res.data.data;
            console.log("区域"+_data)
            _this.options=_data;
          })
          .catch(function (error) {
            this.$message.error('系统错误');
          })

    },
    // 查询的函数展示所有
    query:function(areaName,type,meterState,cardNum,currPage){
      var _this=this;
      axios.get("http://localhost:8081/allUserNews",{
        params:{
          areaName:areaName,
          type:type,
          meterState:meterState,
          cardNum:cardNum,
          currPage:currPage
        }
      })
          .then(function(res){
            console.log(res);
            if(res.data.success){
              let data = res.data.data;
              _this.tableData = data.records;
              _this.total = data.total;
              _this.currPage = data.current;
              _this.size=data.size
            }else{
              _this.$message.error('请求错误' + resp.data.message);
            }
          })
          .catch(function (error) {
            this.$message('出错了'+error);
          })
    },
    //页面跳转
    handleJump(currPageIndex){
      this.query(this.formInline.areaName, this.formInline.type,this.formInline.meterState,this.formInline.cardNum ,currPageIndex);
    },
    //页面搜索
    onSubmit() {
      this.query(this.formInline.areaNames, this.formInline.type,this.formInline.meterState,this.formInline.cardNum,this.currPage);
    },
    //点击确定录入信息
    addUserNews(addForm){
      let addUser = JSON.stringify({
        username:addForm.username,
        idnum:addForm.idnum,
        userAddress:addForm.userAddress,
        userTel:addForm.userTel,
        cardNum:addForm.cardNum,
        areaName:addForm.areaName,
        meterState:addForm.meterState,
        type:addForm.type

      });
      axios.post("http://localhost:8081/addUser",addUser,{
        headers: {
          "Content-Type": "application/json;charset=utf-8"  //头部信息
        }
      })
          .then(function (response) {
            this.$message('添加成功');
            this.query('','','','',1)
          })
          .catch(function (error) {
            this.$message('添加失败'+error);
          });
    },
    // 点击修改
    updateUserNews(form){
      let userNews = JSON.stringify({
        username:form.username,
        userTel:form.userTel,
        cardNum:form.cardNum,
        meterId:form.meterId,
        idnum:form.idnum,
        meterState:form.meterState,
      });
      axios.post("http://localhost:8081/updateUserNews",userNews,{
        headers: {
          "Content-Type": "application/json;charset=utf-8"  //头部信息
        }
      })
          .then(function (response) {
            response.data.data.records.success
            this.$message('修改成功');
          })
          .catch(function (error) {
            this.$message('修改失败'+error);
          });
    },
  },
  created() {
    this.getDep();
  },
  mounted:function(){
    this.query('','','','',1)
  },
  data() {
    return {
      options:[],
      tableData: [],
      formInline: {
        cardNum:'',
        areaNames: '',
        type: '',
        meterState:''
      },
      // 校验输入信息
      rules:{
        username:[ { required: true, message: '请输入用户名', trigger: 'change' },],
        idnum:[{ required: true, message: '请输入用户身份证号', trigger: 'blur' },
          { min: 16, max: 18, message: '身份证号应是16至18位', trigger: 'blur' }],
        userAddress:[{ required: true, message: '请输入用户地址', trigger: 'blur' }],
        userTel:[{ required: true, message: '请输入用户电话', trigger: 'blur' },
          { min: 11, max: 11, message: '联系方式为11位的数字', trigger: 'blur' }],
        meterId:[{ required: true, message: '请输入水表号', trigger: 'blur'}],
        cardNum:[{ required: true, message: '请输入水卡卡号', trigger: 'blur' },
          { min: 2, max:10, message: '水卡号为2至10位', trigger: 'blur' }],
        areaName:[ { required: true, message: '请输入用户区域名', trigger: 'blur' }],
        type:[ { required: true, message: '请选择用水性质', trigger: 'change' }],
        meterState:[ { required: true, message: '请选择用户用水状态', trigger: 'change' }]
      },
      addForm:{},
      addVidible:false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      form:{},
      total:0,
      size:0,
      currPage:1,
      value1:""
    }
  },
}
</script>
<style scoped>
</style>